<template>
  <div class="exchange-rate view flex-row">
    <div
      class="m-r-15 minw300"
      style="border: 1px solid #ebeef5; padding: 10px; border-radius: 5px"
    >
      <div style="text-align: right; margin-bottom: 15px">
        <el-button type="primary" plain @click="showAddTemp = true">
          + 添加模板
        </el-button>
      </div>

      <tree
        :nodes="nodes"
        ref="treeAuth"
        @onClick="selectTree"
        :setting="setting"
        @onCreated="handleCreated"
      />
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      stripe
      :element-loading-text="elementLoadingText"
    >
      <el-table-column
        align="center"
        prop="curreny"
        label="币种"
        min-width="80"
      ></el-table-column>
      <el-table-column align="center" label="汇率" min-width="80">
        <template #default="{ row }">
          <el-input
            v-model="row.rate"
            placeholder="未设置"
            @blur="saveInfo(row)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="status_text"
        label="说明"
        min-width="280"
      ></el-table-column>
    </el-table>

    <el-dialog title="添加模板" :visible.sync="showAddTemp" width="30%">
      <div>
        <div class="view flex-row align-center m-b-20">
          <div class="w80">名称：</div>
          <el-input
            placeholder="请输入名称"
            v-model="info.mname"
            clearable
          ></el-input>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addHandle" :loading="addLoading">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import tree from 'vue-giant-tree'
  import $ from 'jquery'
  import {
    getRatelist,
    delrate,
    editrate,
    addrate,
    getrateinfo,
    saverate,
  } from '@/api/userManagement'
  export default {
    components: { tree },
    data() {
      return {
        ztreeObj: null,
        info: {
          mname: '',
          mid: '',
        },
        showAddTemp: false,
        addLoading: false,
        setting: {
          data: {
            simpleData: {
              enable: true,
              pIdKey: 'pid',
            },
          },
          view: {
            showIcon: false,
            addHoverDom: this.addHoverDom,
            removeHoverDom: this.removeHoverDom,
          },
        },
        listLoading: false,
        nodes: [],
        reteList: [],
        queryForm: {
          rateid: '',
        },
        list: [],
        elementLoadingText: '正在加载...',
      }
    },
    created() {
      this.getList()
    },
    methods: {
      addHandle() {
        this.addLoading = true
        if (this.info.mid) {
          editrate(this.info)
            .then((res) => {
              this.addLoading = false
              this.cancel()
              this.getList()
            })
            .catch((ret) => {
              this.addLoading = false
            })
        } else {
          addrate(this.info)
            .then((res) => {
              this.addLoading = false
              this.cancel()
              this.getList()
            })
            .catch((ret) => {
              this.addLoading = false
            })
        }
      },
      cancel() {
        this.info = this.$options.data().info
        this.showAddTemp = false
      },
      saveInfo(row) {
        saverate({
          rateid: row.id,
          mnum: row.rate,
        })
          .then((res) => {
            this.$baseMessage(res.msg, 'success')
            this.fetchData()
          })
          .catch((ret) => {
            this.$Message(ret.msg)
          })
      },
      getList() {
        getRatelist({})
          .then((res) => {
            this.nodes = res.data.map((item, index) => {
              let datac = {}
              if (index == 0) {
                datac.pid = 0
                datac.isDefault = true
                datac.open = true
              } else {
                datac.isDefault = false
              }
              datac.id = item.id
              datac.name = item.name
              return datac
            })
            this.reteList = res.data
          })
          .catch((ret) => {})
      },
      selectTree() {
        let node = this.ztreeObj.getSelectedNodes()[0]
        this.queryForm.rateid = node.id
        this.fetchData()
      },
      addHoverDom(treeid, treeNode) {
        const item = document.getElementById(`${treeNode.tId}_a`)
        if (
          item &&
          !item.querySelector('.tree_extra_btn') &&
          !treeNode.isDefault
        ) {
          const btn = document.createElement('sapn')
          btn.id = `${treeid}_${treeNode.id}_btn`
          btn.classList.add('tree_extra_btn')
          btn.innerText = '删除'

          const btn1 = document.createElement('sapn')
          btn1.id = `${treeid}_${treeNode.id}_btn_1`
          btn1.classList.add('m-r-15')
          btn1.classList.add('tree_extra_btn_1')
          btn1.innerText = '编辑'

          btn1.addEventListener('click', (e) => {
            e.stopPropagation()
            this.clickEdit(treeNode)
          })

          btn.addEventListener('click', (e) => {
            e.stopPropagation()
            this.clickRemove(treeNode)
          })

          item.appendChild(btn1)

          item.appendChild(btn)
        }
      },
      clickEdit(info) {
        let infoc = this.reteList.find((item) => item.id == info.id)
        this.info.mid = infoc.id
        this.info.mname = infoc.name

        this.showAddTemp = true
      },
      removeHoverDom(treeid, treeNode) {
        const item = document.getElementById(`${treeNode.tId}_a`)
        if (item) {
          const btn = item.querySelector('.tree_extra_btn')
          if (btn) {
            item.removeChild(btn)
          }
          const btn1 = item.querySelector('.tree_extra_btn_1')
          if (btn1) {
            item.removeChild(btn1)
          }
        }
      },
      clickRemove(treeNode) {
        this.ztreeObj && this.ztreeObj.removeNode(treeNode)
        delrate({ mid: treeNode.id })
          .then((res) => {
            this.$baseMessage(res.msg, 'success')
          })
          .catch((ret) => {
            this.$Message(ret.msg)
          })
      },
      handleCreated: function (ztreeObj) {
        this.ztreeObj = ztreeObj

        if (this.ztreeObj.getNodes()[0]) {
          ztreeObj.expandNode(ztreeObj.getNodes()[0], true)
          this.ztreeObj.selectNode(this.ztreeObj.getNodes()[0], true)
          this.queryForm.rateid = this.ztreeObj.getNodes()[0].id
          this.fetchData()
        }
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await getrateinfo(this.queryForm)
        this.list = data
        this.listLoading = false
      },
    },
  }
</script>
<style lang="scss" scoped>
  .exchange-rate {
    padding: 20px;
    ::v-deep {
      .el-input__inner {
        text-align: center;
      }
    }
  }
  .minw300 {
    min-width: 200px;
  }
</style>
